<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Button</title>
        <style>
            html,
            body {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fffefe;
            }

            .button {
                position: relative;
                border-radius: 10px;
                padding: 20px 40px;
                color: transparent;
                transition: all 0.2s;
                font-weight: bold;
                cursor: pointer;
                border: 2px solid #b992a2;
                z-index: 1;
                box-sizing: border-box;
                background: #f8c4d2;
                box-shadow: 0 8px 0 0 #ffe3e2;
            }

            .button::after {
                font-weight: bold;
                color: #382b22;
                content: attr(data-text);
                height: 100%;
                width: 100%;
                position: absolute;
                top: -15px;
                left: -2px;
                border-radius: 10px;
                border: 2px solid #b992a2;
                background-color: #fff0f0;
                z-index: -1;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: all 0.2s;
            }

            .button:active {
                box-shadow: 0 0 0 0 #ffe3e2;
            }

            .button:hover::after {
                background-color: #fee8e8;
            }

            .button:active::after {
                top: -2px;
            }
        </style>
    </head>

    <body>
        <button class="button" data-text="Learn More">Learn More</button>
    </body>

</html>
